<template>
  <div>
    <p class="tip">更加复杂的合并行，实现横向树结构<br><span class="red">（注：<table-api-link prop="span-method"/> 合并的逻辑都是自行实现的，该示例仅供参考）</span></p>

    <vxe-table
      border
      height="600"
      :span-method="rowspanMethod"
      :data="tableData">
      <vxe-table-column field="name1" title="功能模块"></vxe-table-column>
      <vxe-table-column field="name2" title="详细功能"></vxe-table-column>
      <vxe-table-column field="name3" title="权限类型">
        <template v-slot="{ row }">
          <vxe-checkbox v-model="row.check3" @change="check3ChangeEvent(row)">{{ row.name3 }}</vxe-checkbox>
        </template>
      </vxe-table-column>
      <vxe-table-column field="name4" title="权限列表">
        <template v-slot="{ row }">
          <vxe-checkbox v-model="row.check4" @change="check4ChangeEvent(row)">{{ row.name4 }}</vxe-checkbox>
        </template>
      </vxe-table-column>
    </vxe-table>

    <p class="demo-code">{{ $t('app.body.button.showCode') }}</p>

    <pre>
      <code class="xml">{{ demoCodes[0] }}</code>
      <code class="javascript">{{ demoCodes[1] }}</code>
    </pre>
  </div>
</template>

<script>
import XEUtils from 'xe-utils'
import hljs from 'highlight.js'

export default {
  data () {
    return {
      treeData: [
        {
          id: '10000',
          name: '账号管理',
          children: [
            {
              id: '11000',
              name: '用户管理',
              children: [
                {
                  id: '11100',
                  name: '查看',
                  children: [
                    {
                      id: '11110',
                      name: '用户列表'
                    }
                  ]
                },
                {
                  id: '11200',
                  name: '编辑',
                  children: [
                    {
                      id: '11210',
                      name: '用户列表'
                    },
                    {
                      id: '11220',
                      name: '新增用户'
                    }
                  ]
                },
                {
                  id: '11300',
                  name: '操作',
                  children: [
                    {
                      id: '11310',
                      name: '新增'
                    },
                    {
                      id: '11320',
                      name: '删除'
                    },
                    {
                      id: '11330',
                      name: '修改'
                    }
                  ]
                }
              ]
            },
            {
              id: '12000',
              name: '角色管理',
              children: [
                {
                  id: '12100',
                  name: '查看',
                  children: [
                    {
                      id: '12110',
                      name: '角色列表'
                    }
                  ]
                },
                {
                  id: '12200',
                  name: '编辑',
                  children: [
                    {
                      id: '122100',
                      name: '角色列表'
                    },
                    {
                      id: '12220',
                      name: '新增角色'
                    }
                  ]
                },
                {
                  id: '12300',
                  name: '操作',
                  children: [
                    {
                      id: '12310',
                      name: '新增'
                    },
                    {
                      id: '12320',
                      name: '删除'
                    },
                    {
                      id: '12330',
                      name: '修改'
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          id: '20000',
          name: '个人中心',
          children: [
            {
              id: '21000',
              name: '个性化设置',
              children: [
                {
                  id: '21100',
                  name: '查看',
                  children: [
                    {
                      id: '21110',
                      name: '信息列表'
                    }
                  ]
                },
                {
                  id: '21200',
                  name: '操作',
                  children: [
                    {
                      id: '21210',
                      name: '重置信息'
                    }
                  ]
                }
              ]
            },
            {
              id: '22000',
              name: '账户管理',
              children: [
                {
                  id: '22100',
                  name: '查看',
                  children: [
                    {
                      id: '22110',
                      name: '账户余额'
                    },
                    {
                      id: '22120',
                      name: '帐变记录'
                    }
                  ]
                }
              ]
            }
          ]
        }
      ],
      tableData: [],
      demoCodes: [
        `
        <vxe-table
          border
          height="600"
          :span-method="rowspanMethod"
          :data="tableData">
          <vxe-table-column field="name1" title="功能模块"></vxe-table-column>
          <vxe-table-column field="name2" title="详细功能"></vxe-table-column>
          <vxe-table-column field="name3" title="权限类型">
            <template v-slot="{ row }">
              <vxe-checkbox v-model="row.check3" @change="check3ChangeEvent(row)">{{ row.name3 }}</vxe-checkbox>
            </template>
          </vxe-table-column>
          <vxe-table-column field="name4" title="权限列表">
            <template v-slot="{ row }">
              <vxe-checkbox v-model="row.check4" @change="check4ChangeEvent(row)">{{ row.name4 }}</vxe-checkbox>
            </template>
          </vxe-table-column>
        </vxe-table>
        `,
        `
        export default {
          data () {
            return {
              treeData: [
                {
                  id: '10000',
                  name: '账号管理',
                  children: [
                    {
                      id: '11000',
                      name: '用户管理',
                      children: [
                        {
                          id: '11100',
                          name: '查看',
                          children: [
                            {
                              id: '11110',
                              name: '用户列表'
                            }
                          ]
                        },
                        {
                          id: '11200',
                          name: '编辑',
                          children: [
                            {
                              id: '11210',
                              name: '用户列表'
                            },
                            {
                              id: '11220',
                              name: '新增用户'
                            }
                          ]
                        },
                        {
                          id: '11300',
                          name: '操作',
                          children: [
                            {
                              id: '11310',
                              name: '新增'
                            },
                            {
                              id: '11320',
                              name: '删除'
                            },
                            {
                              id: '11330',
                              name: '修改'
                            }
                          ]
                        }
                      ]
                    },
                    {
                      id: '12000',
                      name: '角色管理',
                      children: [
                        {
                          id: '12100',
                          name: '查看',
                          children: [
                            {
                              id: '12110',
                              name: '角色列表'
                            }
                          ]
                        },
                        {
                          id: '12200',
                          name: '编辑',
                          children: [
                            {
                              id: '122100',
                              name: '角色列表'
                            },
                            {
                              id: '12220',
                              name: '新增角色'
                            }
                          ]
                        },
                        {
                          id: '12300',
                          name: '操作',
                          children: [
                            {
                              id: '12310',
                              name: '新增'
                            },
                            {
                              id: '12320',
                              name: '删除'
                            },
                            {
                              id: '12330',
                              name: '修改'
                            }
                          ]
                        }
                      ]
                    }
                  ]
                },
                {
                  id: '20000',
                  name: '个人中心',
                  children: [
                    {
                      id: '21000',
                      name: '个性化设置',
                      children: [
                        {
                          id: '21100',
                          name: '查看',
                          children: [
                            {
                              id: '21110',
                              name: '信息列表'
                            }
                          ]
                        },
                        {
                          id: '21200',
                          name: '操作',
                          children: [
                            {
                              id: '21210',
                              name: '重置信息'
                            }
                          ]
                        }
                      ]
                    },
                    {
                      id: '22000',
                      name: '账户管理',
                      children: [
                        {
                          id: '22100',
                          name: '查看',
                          children: [
                            {
                              id: '22110',
                              name: '账户余额'
                            },
                            {
                              id: '22120',
                              name: '帐变记录'
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }
              ],
              tableData: []
            }
          },
          created () {
            this.toColTreeData()
          },
          methods: {
            check3ChangeEvent (row) {
            const checked = row.check3
            const levelList = this.tableData.filter(item => item.id3 === row.id3)
            levelList.forEach(item => {
              item.check4 = checked
            })
          },
          check4ChangeEvent (row) {
            const levelList = this.tableData.filter(item => item.id3 === row.id3)
            const checked = levelList.every(item => item.check4)
            levelList.forEach(item => {
              item.check3 = checked
            })
          },
          // 转换横向树结构
          toColTreeData () {
            const options = { children: 'children' }
            const list = []
            const keyMap = {}
            XEUtils.eachTree(this.treeData, (item, index, result, paths, parent) => {
              keyMap[item.id] = item
              item.keys = parent ? parent.keys.concat([item.id]) : [item.id]
              if (!item.children || !item.children.length) {
                const row = { }
                item.keys.forEach((key, index) => {
                  const level = index + 1
                  const obj = keyMap[key]
                  row[\`check\${level}\`] = false
                  row[\`id\${level}\`] = obj.id
                  row[\`name\${level}\`] = obj.name
                })
                list.push(row)
              }
            }, options)
            this.keyMap = keyMap
            this.tableData = list
          },
          // 通用行合并函数（将相同多列数据合并为一行）
          rowspanMethod ({ row, $rowIndex, column, data }) {
            const fields = ['name1', 'name2', 'name3']
            const cellValue = XEUtils.get(row, column.property)
            if (cellValue && fields.includes(column.property)) {
              const prevRow = data[$rowIndex - 1]
              let nextRow = data[$rowIndex + 1]
              if (prevRow && XEUtils.get(prevRow, column.property) === cellValue) {
                return { rowspan: 0, colspan: 0 }
              } else {
                let countRowspan = 1
                while (nextRow && XEUtils.get(nextRow, column.property) === cellValue) {
                  nextRow = data[++countRowspan + $rowIndex]
                }
                if (countRowspan > 1) {
                  return { rowspan: countRowspan, colspan: 1 }
                }
              }
            }
          }
        }
        `
      ]
    }
  },
  created () {
    this.toColTreeData()
  },
  mounted () {
    Array.from(this.$el.querySelectorAll('pre code')).forEach((block) => {
      hljs.highlightBlock(block)
    })
  },
  methods: {
    check3ChangeEvent (row) {
      const checked = row.check3
      const levelList = this.tableData.filter(item => item.id3 === row.id3)
      levelList.forEach(item => {
        item.check4 = checked
      })
    },
    check4ChangeEvent (row) {
      const levelList = this.tableData.filter(item => item.id3 === row.id3)
      const checked = levelList.every(item => item.check4)
      levelList.forEach(item => {
        item.check3 = checked
      })
    },
    // 转换横向树结构
    toColTreeData () {
      const options = { children: 'children' }
      const list = []
      const keyMap = {}
      XEUtils.eachTree(this.treeData, (item, index, result, paths, parent) => {
        keyMap[item.id] = item
        item.keys = parent ? parent.keys.concat([item.id]) : [item.id]
        if (!item.children || !item.children.length) {
          const row = { }
          item.keys.forEach((key, index) => {
            const level = index + 1
            const obj = keyMap[key]
            row[`check${level}`] = false
            row[`id${level}`] = obj.id
            row[`name${level}`] = obj.name
          })
          list.push(row)
        }
      }, options)
      this.keyMap = keyMap
      this.tableData = list
    },
    // 通用行合并函数（将相同多列数据合并为一行）
    rowspanMethod ({ row, $rowIndex, column, data }) {
      const fields = ['name1', 'name2', 'name3']
      const cellValue = XEUtils.get(row, column.property)
      if (cellValue && fields.includes(column.property)) {
        const prevRow = data[$rowIndex - 1]
        let nextRow = data[$rowIndex + 1]
        if (prevRow && XEUtils.get(prevRow, column.property) === cellValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let countRowspan = 1
          while (nextRow && XEUtils.get(nextRow, column.property) === cellValue) {
            nextRow = data[++countRowspan + $rowIndex]
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 }
          }
        }
      }
    }
  }
}
</script>
